<template>
  <div class="con-box">
    <div class="iform">
      <div class="form1">
        <input
          type="text"
          placeholder="请输入登录码"
          disabled
          v-model="MachineCode"
        />
      </div>
      <div class="form2">
        <input type="text" placeholder="请输入许可码" v-model="form.greenId" />
      </div>
      <div class="submit" @click="onsubmit"></div>
    </div>
  </div>
</template>

<script>
import {getCode, getDood,postLogin} from '../http/api'
export default {
  name: "Login",
  data() {
    return {
      MachineCode:'',
      form: {
        account: "admin",
        msgType:1,
        greenId:''
      },
      socket: {}, //socket创建实例对象
      // path: "ws://121.40.165.18:8800",
      path: "ws://192.168.1.28:5238/ws", //需要连接的地址
     
      receiveMsg: {},
      
    };
  },
  components: {},
  mounted() {
    // this.init();
    getCode().then((res)=>{
      console.log(res);
      if(res.isVaild === true){
        this.$router.push('home')
      }else{
      
      }
        console.log('机器码',res.machineCode);
        this.MachineCode = res.machineCode
        
    })
    this.form.greenId = sessionStorage.getItem('greenId'); 
    if(sessionStorage.getItem('greenId') ==='null'){
      this.form.greenId = ''
    }

  },
  methods: {
    // websocket初始化
    init() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        this.socket.onopen = this.open;

        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open() {
      console.log("连接成功");
       this.socket.send(JSON.stringify(this.form));

       
    },
    error() {
      console.log("连接错误");
    },
    getMessage(res) {
      console.log("收取到的信息", res.data);
      this.receiveMsg = JSON.parse(res.data)
      // Object.assign('receiveMsg',JSON.parse(res.data))
      // this.receiveMsg.push(JSON.parse(res.data));
      this.MachineCode =  this.receiveMsg.MachineCode
      console.log(this.receiveMsg.MachineCode);
      
    },
    //发送信息
    submit() {
      console.log(JSON.stringify(this.form.greenId));
      if (this.socket.readyState === 1) {
        console.log("已经链接并且可以通讯");
        this.socket.send(JSON.stringify(this.form.greenId));
        console.log(this.form);
      }
      if (this.socket.readyState === 0) {
        console.log("正在链接中");
      }
      if (this.socket.readyState === 2) {
        console.log("连接正在关闭");
      }
      if (this.socket.readyState === 3) {
        console.log("连接已关闭或者没有链接成功");
      }
    },
    // 登录
    onsubmit() {
      console.log(this.form.greenId);
      sessionStorage.setItem('greenId',this.form.greenId)
      let code = {
        code:this.form.greenId
      }
      postLogin(code).then((res)=>{
        console.log(res);
        if(res === true){
          this.$router.push("home");
        }
        else{

            this.$message.error('许可证已过期，请重新申请');
        }
      })
    },
  },
};
</script>

<style scoped lang="less">
.con-box {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/img/login_bg.png");
  background-size: 100% 100%;
  position: relative;
  .iform {
    width: 500px;
    height: 300px;

    margin: 400px auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    .form1 {
      width: 400px;
      height: 60px;
      margin: auto;
      margin-bottom: 30px;
      background-image: url("../assets/img/input1.png");
      background-size: 100% 100%;
      input {
        height: 80%;
        margin-top: 7px;
        width: 60%;
        margin-left: 120px;
        background-color: transparent;
        border: none;
        outline: none;
        caret-color: #fff;
        font-size: 18px;
        color: #fff;
      }
    }
    .form2 {
      width: 400px;
      height: 60px;
      margin: auto;
      margin-bottom: 50px;
      background-image: url("../assets/img/input2.png");
      background-size: 100% 100%;
      input {
        height: 80%;
        margin-top: 7px;
        width: 60%;
        margin-left: 120px;
        background-color: transparent;
        border: none;
        outline: none;
        caret-color: #fff;
        font-size: 18px;
        color: #fff;
      }
    }
    .submit {
      width: 300px;
      height: 60px;
      margin: auto;
      margin-bottom: 50px;
      background-image: url("../assets/img/login.png");
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
}
</style>

